<template>
  <div>
    <!-- <el-button type="primary" :disabled="!category3Id" icon="el-icon-plus" @click="handlerClick">添加属性</el-button> -->
    <el-button type="primary" :disabled="!category3Id" icon="el-icon-plus" @click="addAttrValue">添加属性</el-button>
    <el-table v-loading="loading" :data="attrList" border style="width: 100%;margin-top:10px;">
      <el-table-column type="index" align="center" label="序号" width="80" />
      <el-table-column prop="attrName" align="center" label="属性名" width="180" />
      <!-- 内部既然使用了插槽语法，则el-table-column上的prop属性就没用了 -->
      <el-table-column label="属性值列表">
        <template v-slot="{row}">
          <el-tag v-for="attrValue in row.attrValueList" :key="attrValue.id" style="margin-right:10px">{{ attrValue.valueName }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作">
        <template v-slot="{row,$index}">
          <el-tooltip content="编辑属性" placement="top" style="margin-right:10px">
            <el-button type="warning" icon="el-icon-edit" size="small" @click="editAttrValue(row)" />
          </el-tooltip>
          <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" icon="el-icon-info" icon-color="red" title="您真的要删除此项属性值吗？" @onConfirm="deleteCurrentAttr(row,$index)">
            <el-tooltip slot="reference" content="删除属性" placement="top">
              <el-button type="danger" icon="el-icon-delete" size="small" />
            </el-tooltip>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { reqDeleteAttr, reqGetAttrList } from '@/api/product/attr'
export default {
  name: 'AttrList',
  data() {
    return {
      loading: false,
      attrList: []
    }
  },
  computed: {
    ...mapState('category', ['category1Id', 'category2Id', 'category3Id'])
  },
  watch: {
    // async category3Id() {
    //   const { category1Id, category2Id, category3Id } = this
    //   if (!category3Id) {
    //     this.attrList = []
    //     return // 不要向下执行代码了
    //   }
    //   this.loading = true
    //   const result = await reqGetAttrList({ category1Id, category2Id, category3Id })
    //   if (result.code === 200) {
    //     this.attrList = result.data
    //     this.loading = false
    //   }
    // }
    category3Id: {
      immediate: true, // 立即开始执行
      // handler() {
      //   this.getAttrList()
      // }
      handler: 'getAttrList'
    }
  },
  methods: {
    // 0. 获取当前的属性列表
    async getAttrList() {
      const { category1Id, category2Id, category3Id } = this
      if (!category3Id) {
        this.attrList = []
        return // 不要向下执行代码了
      }
      this.loading = true
      const result = await reqGetAttrList({ category1Id, category2Id, category3Id })
      if (result.code === 200) {
        this.attrList = result.data
        this.loading = false
      }
    },
    // handlerClick() {
    //   this.$emit('setIsShowAttrList', false)
    // }
    // 1. 删除某一行属性
    async deleteCurrentAttr(row, index) {
      // const result = await reqDeleteAttr(row.id)
      // if (result.code === 200) {
      //   this.attrList.splice(index, 1)
      //   this.$message.success('删除属性成功...')

      //   // 本来在删除当前项成功的时候，应该再次向服务器发送请求，获取剩余的数据显示到页面上
      // }
      // // 当前的删除，不往服务器发送请求获取剩余的数据，是用数组剩余的数据重新渲染页面

      const result = await reqDeleteAttr(row.id)
      if (result.code === 200) {
        // this.attrList.splice(index, 1)
        this.$message.success('删除属性成功...')

        // 重新向服务器发送请求，获取剩余的数据渲染页面
        this.getAttrList()
      }
      // 当前的删除，不往服务器发送请求获取剩余的数据，是用数组剩余的数据重新渲染页面
    },
    // 2. 编辑属性
    editAttrValue(row) {
      // 传值
      this.$emit('setAttr', row)
      // 实现切换
      this.$emit('setIsShowAttrList', false)
    },
    // 3. 添加属性的按钮逻辑
    addAttrValue() {
      this.$emit('setAttr', {
        attrName: '',
        attrValueList: []
      })
      // 切换
      this.$emit('setIsShowAttrList', false)
    }
  }
}
</script>

<style>
</style>
